<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>网站首页</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="../css/reset.css" rel="stylesheet">
		<link href="../css/layout.css" rel="stylesheet">
		<link href="../css/animate.min.css" rel="stylesheet">
		<script src="../js/jquery.min.js"></script>
		<script src="../js/xSlider.js"></script>
		<script src="../js/index.js"></script>
		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
		<script>
			window.onload = function() {
				var oUl = document.getElementById('menuList');
				var aLi = oUl.children;
				var oBox = aLi[aLi.length - 1];
				var iNow = 0;

				for(var i = 0; i < aLi.length - 1; i++) {
					aLi[i].index = i;
					aLi[i].onmouseover = function() {
						//oBox.style.left=this.offsetLeft+'px';
						startMove(oBox, this.offsetLeft);
						style = "active";
					};
					aLi[i].onmouseout = function() {
						//oBox.style.left=this.offsetLeft+'px';
						startMove(oBox, iNow * aLi[0].offsetWidth);
					};
					aLi[i].onclick = function() {
						iNow = this.index;
					};
				}
			};
		</script>
	</head>

	<body>
		<div class="wrap">
			<div class="header">
				<div class="commwidth clearfix">
					<h1 class="logo">
   					<img src="../images/logo.png" alt="">
   				</h1>
					<div class="menu">
						<ul class="clearfix" id="menuList">
							<li class="">
								<a href="index.html">首页</a>
							</li>
							<li>
								<a href="javascript:;">名师微课</a>
							</li>
							<li>
								<a href="weike.html">课堂平台</a>
							</li>
							<li>
								<a href="javascript:;">名师直播</a>
							</li>
							<li>
								<a href="apply.html">合作</a>
							</li>
							<li class="box"></li>
						</ul>
					</div>
					<div class="user_menu">
						<ul class="clearfix">
							<li>
								<span class="fl" id="sign">登录</span>
								<i class="fenge fl"></i>
								<em class="fl" id="register">注册</em>
							</li>
							<li class="searchLi">
								<div data-selector="search_show" class="search_show fl">
									<i data-selector="search_btn" class="icon1 search_btn fl"></i>
									<div data-selector="search_contain" class="search_contain opacity fl"><input type="text" class="search_text" data-selector="search_text"><i class="icon1"></i></div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="videoMain">
				<div class="tr-nav">
					<div class="tr-nav-period">
						<div class="nav-dia clearfix">
							<div class="tr-nav-lei fl">课程学段</div>
							<ul class="clearfix fl">
								<li class="active">不限</li>
								<li>小学</li>
								<li>初中</li>
								<li>高中</li>
							</ul>
						</div>
					</div>
					<div class="tr-nav-period nav-subject">
						<div class="nav-dia clearfix">
							<div class="tr-nav-lei fl">课程科目</div>
							<ul class="clearfix fl" id="tr-nav">
								<li class="active">不限</li>
								<li>语文</li>
								<li>数学</li>
								<li>英语</li>
								<li>历史</li>
								<li>政治</li>
								<li>自然</li>
								<li>美术</li>
								<li>体育</li>
								<li>物理</li>
								<li>生物</li>
								<li>化学</li>
								<li>地理</li>
								<li>生物</li>
								<li>化学</li>
								<li>地理</li>
							</ul>
							<div class="nav-bar fr" id="tr-nav-btn">
								<img src="../images/jt.png" />
							</div>
						</div>
					</div>
				</div>
				<div class="searchBox clearfix">
					<div class="fl sort">
						<div>排序：</div>
						<p class="active">综合</p>
						<p>热度</p>
						<p>时间</p>
					</div>
					<div class="searchIpt fr">
						<input type="text" placeholder="搜索你想要查看的课程">
						<span class="searchBar fr"></span>
					</div>
				</div>
				<div class="videoShow">
					<ul class="clearfix videoList">
						<li class="fl">
							<div class="videoPic">
								<div class="videoMask"></div>
								<img src="../images/pica.jpg" alt="">
								<span class="picBar"></span>
							</div>
							<div class="videoText">
								<h4>跟着小五老师学语文作文【写作技巧】</h4>
								<div class="videotips clearfix">
									<p class="fl"><em>999999</em>人已学</p>
									<p class="fr add">电教馆</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<div class="videoPic">
								<div class="videoMask"></div>
								<img src="../images/picb.jpg" alt="">
								<span class="picBar"></span>
							</div>
							<div class="videoText">
								<h4>跟着小五老师学语文作文【写作技巧】</h4>
								<div class="videotips clearfix">
									<p class="fl"><em>999999</em>人已学</p>
									<p class="fr add">电教馆</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<div class="videoPic">
								<div class="videoMask"></div>
								<img src="../images/picc.jpg" alt="">
								<span class="picBar"></span>
							</div>
							<div class="videoText">
								<h4>跟着小五老师学语文作文【写作技巧】</h4>
								<div class="videotips clearfix">
									<p class="fl"><em>999999</em>人已学</p>
									<p class="fr add">电教馆</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<div class="videoPic">
								<div class="videoMask"></div>
								<img src="../images/pica.jpg" alt="">
								<span class="picBar"></span>
							</div>
							<div class="videoText">
								<h4>跟着小五老师学语文作文【写作技巧】</h4>
								<div class="videotips clearfix">
									<p class="fl"><em>999999</em>人已学</p>
									<p class="fr add">电教馆</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<div class="videoPic">
								<div class="videoMask"></div>
								<div class="videoMask"></div>
								<img src="../images/pica.jpg" alt="">
								<span class="picBar"></span>
							</div>
							<div class="videoText">
								<h4>跟着小五老师学语文作文【写作技巧】</h4>
								<div class="videotips clearfix">
									<p class="fl"><em>999999</em>人已学</p>
									<p class="fr add">电教馆</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<div class="videoPic">
								<div class="videoMask"></div>
								<img src="../images/picb.jpg" alt="">
								<span class="picBar"></span>
							</div>
							<div class="videoText">
								<h4>跟着小五老师学语文作文【写作技巧】</h4>
								<div class="videotips clearfix">
									<p class="fl"><em>999999</em>人已学</p>
									<p class="fr add">电教馆</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<div class="videoPic">
								<div class="videoMask"></div>
								<img src="../images/picc.jpg" alt="">
								<span class="picBar"></span>
							</div>
							<div class="videoText">
								<h4>跟着小五老师学语文作文【写作技巧】</h4>
								<div class="videotips clearfix">
									<p class="fl"><em>999999</em>人已学</p>
									<p class="fr add">电教馆</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<div class="videoPic">
								<div class="videoMask"></div>
								<img src="../images/pica.jpg" alt="">
								<span class="picBar"></span>
							</div>
							<div class="videoText">
								<h4>跟着小五老师学语文作文【写作技巧】</h4>
								<div class="videotips clearfix">
									<p class="fl"><em>999999</em>人已学</p>
									<p class="fr add">电教馆</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<div class="videoPic">
								<div class="videoMask"></div>
								<img src="../images/pica.jpg" alt="">
								<span class="picBar"></span>
							</div>
							<div class="videoText">
								<h4>跟着小五老师学语文作文【写作技巧】</h4>
								<div class="videotips clearfix">
									<p class="fl"><em>999999</em>人已学</p>
									<p class="fr add">电教馆</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<div class="videoPic">
								<div class="videoMask"></div>
								<img src="../images/picb.jpg" alt="">
								<span class="picBar"></span>
							</div>
							<div class="videoText">
								<h4>跟着小五老师学语文作文【写作技巧】</h4>
								<div class="videotips clearfix">
									<p class="fl"><em>999999</em>人已学</p>
									<p class="fr add">电教馆</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<div class="videoPic">
								<div class="videoMask"></div>
								<img src="../images/picc.jpg" alt="">
								<span class="picBar"></span>
							</div>
							<div class="videoText">
								<h4>跟着小五老师学语文作文【写作技巧】</h4>
								<div class="videotips clearfix">
									<p class="fl"><em>999999</em>人已学</p>
									<p class="fr add">电教馆</p>
								</div>
							</div>
						</li>
						<li class="fl">
							<div class="videoPic">
								<div class="videoMask"></div>
								<img src="../images/pica.jpg" alt="">
								<span class="picBar"></span>
							</div>
							<div class="videoText">
								<h4>跟着小五老师学语文作文【写作技巧】</h4>
								<div class="videotips clearfix">
									<p class="fl"><em>999999</em>人已学</p>
									<p class="fr add">电教馆</p>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="pageing">
					<div class="containa">
						<a href="#" class="prev"><span></span></a>
						<a href="#">1</a>
						<a href="#" class="ellipsis">...</a>
						<a href="#">6</a>
						<a href="#">7</a>
						<a href="#">8</a>
						<a href="#">9</a>
						<a href="#" class="activea">10</a>
						<a href="#">11</a>
						<a href="#" class="ellipsis">...</a>
						<a href="#">50</a>
						<a href="#" class="next">
							<span></span>
						</a>
						<!-- <span class="total">共666条</span>
	                        <span>到第&nbsp;</span>
	                        <input type="text" class="pageid">
	                        <span>&nbsp;页&nbsp;</span>
	                        <button>确定</button> -->
					</div>
				</div>
			</div>
			<div class="toTopBox">
				<div class="toTop" style="opacity: 1;" title="返回顶部">
					<span></span>
				</div>
			</div>
			<div class="footer">
				<div class="footer-top clearfix">
					<div class="footer-vx fl">
						<p class="footer-title">关注我们</p>
						<div class="footer-vx-box clearfix">
							<div class="footer-vx-item footer-vx-itemNo1">
								<img src="../images/vx1.jpg" />
								<p>佳讯教育</p>
							</div>
							<div class="footer-vx-item">
								<img src="../images/vx2.jpg" />
								<p>微课课堂服务号</p>
							</div>
						</div>
					</div>
					<div class="footer-contact fl">
						<p class="footer-title">关注我们</p>
						<p class="footer-contact-font">热线电话：400-815-0802</p>
						<p class="footer-contact-font">电&#12288;&#12288;话：010-62698511</p>
						<p class="footer-contact-font">Q &#12288;&#12288; Q：981940781</p>
					</div>
				</div>
				<p class="footer-bottom">© Copyright@2015-2025北京永恒信业科技有很公司 .版权所有 京ICP备09025686号-1</p>
			</div>
		</div>

		<script type="text/javascript">
			$('[data-selector="search_show"]').click(function() {
				$('[data-selector="search_contain"]').show();
				$('[data-selector="search_btn"]').hide();
			});
			$('[data-selector="search_text"]').focus(function() {
				$('[data-selector="search_contain"]').removeClass('opacity');
			});
			$('.slider').xSlider();
			$('.navBar').on('mouseover', function(event) {
				$('.navList').show();
				event.preventDefault();
			});
			$('.navBar').on('mouseout', function(event) {
				$('.navList').hide();
				event.preventDefault();
			});
			$('.videoList li').each(function() {
				$(this).mouseover(function(event) {
					var $this = $(this);
					$this.addClass('cur');
				});
				$(this).mouseout(function(event) {
					var $this = $(this);
					$this.removeClass('cur');
				});
			})
			$('#tr-nav').css('height', $('#tr-nav').outerHeight());
			$('#tr-nav-btn').click(function() {
				if($('#tr-nav').hasClass('nav-dia-hide')) {
					$('#tr-nav').removeClass('nav-dia-hide');
					$(this).removeClass('nav-bar-up');
				} else {
					$('#tr-nav').addClass('nav-dia-hide');
					$(this).addClass('nav-bar-up');
				}
			});
			//返回顶部
			$(function() {
				var $backToTopEle = $('.toTop'),
					$backToTopFun = function() {
						var st = $(document).scrollTop(),
							winh = $(window).height();
						(st > 200) ? $backToTopEle.fadeIn('slow'): $backToTopEle.fadeOut('slow');
						//IE6下的定位
						if(!window.XMLHttpRequest) {
							$backToTopEle.css("top", st + winh - 166);
						}
					};
				$('.toTop').click(function() {
					$("html, body").animate({
						scrollTop: 0
					}, 600);
				})
				$backToTopEle.hide();
				$backToTopFun();
				$(window).bind("scroll", $backToTopFun);
				$('#catalogWord').click(function() {
					$("#catalog").slideToggle(600);
				})
			})
		</script>
	</body>

</html>